<template>
  <el-card class="mt-10">
    <div class="chart-container" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import china from "./china.json";

//注册地图
echarts.registerMap("china", china as any);

const chartRef = ref();

const data = [
  {
    name: "台湾",
    value: "39152",
  },
  {
    name: "香港",
    value: "638",
  },
  {
    name: "山西",
    value: "126",
  },
  {
    name: "广东",
    value: "51",
  },
  {
    name: "内蒙古",
    value: "35",
  },
  {
    name: "北京",
    value: "26",
  },
  {
    name: "福建",
    value: "21",
  },
  {
    name: "陕西",
    value: "12",
  },
  {
    name: "新疆",
    value: "9",
  },
  {
    name: "湖南",
    value: "8",
  },
  {
    name: "上海",
    value: "7",
  },
  {
    name: "云南",
    value: "7",
  },
  {
    name: "天津",
    value: "7",
  },
  {
    name: "重庆",
    value: "7",
  },
  {
    name: "江苏",
    value: "5",
  },
  {
    name: "河南",
    value: "3",
  },
  {
    name: "安徽",
    value: "3",
  },
  {
    name: "四川",
    value: "2",
  },
  {
    name: "浙江",
    value: "2",
  },
  {
    name: "黑龙江",
    value: "2",
  },
  {
    name: "山东",
    value: "2",
  },
  {
    name: "青海",
    value: "2",
  },
  {
    name: "西藏",
    value: "1",
  },
  {
    name: "湖北",
    value: "0",
  },
  {
    name: "吉林",
    value: "0",
  },
  {
    name: "海南",
    value: "0",
  },
  {
    name: "广西",
    value: "0",
  },
  {
    name: "河北",
    value: "0",
  },
  {
    name: "辽宁",
    value: "0",
  },
  {
    name: "江西",
    value: "0",
  },
  {
    name: "甘肃",
    value: "0",
  },
];
onMounted(() => {
  const myEchart = echarts.init(chartRef.value);
  const option = {
    series: {
      type: "map",
      map: "china",
      zoom: 1.5,
      top: 150,
      label: {
        show: true,
      },
      data,
    },
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 10000, color: "#b80909" },
        { min: 1000, max: 9999, color: "#e64546" },
        { min: 100, max: 999, color: "#f57567" },
        { min: 10, max: 99, color: "#ff9985" },
        { min: 1, max: 9, color: "#ffe5db" },
        { value: 0, color: "#fff" },
      ],
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.chart-container {
  height: 600px;
}
</style>
